<template>
  <div class="layer" v-if="show" @touchmove.stop="preventD" @click="onBgClick">
    <div class="dialog">
      <div class="dialog-container1" v-if="step === 1">
        <div class="dialog-alert" :style="alert14">
          <div class="dialog-alert-btn"></div>
        </div>
        <div class="dialog-btn">
          <i :style="menu5"></i>
          <span>我的店铺</span>
          <div class="act"></div>
        </div>
      </div>
      <div class="dialog-container2" v-if="step === 2">
        <div class="dialog-alert" :style="pao1"></div>
        <div class="dialog-btn">
          <i :style="menu4"></i>
          <span>奖品兑换</span>
          <div class="act"></div>
        </div>
      </div>
      <div class="dialog-container3" v-if="step === 3">
        <div class="dialog-alert" :style="pao2"></div>
        <div class="dialog-btn">
          <i :style="qiandao"></i>
          <!-- <div class="act"></div> -->
        </div>
      </div>
      <div class="dialog-container4" v-if="step === 4">
        <div class="dialog-alert" :style="pao3"></div>
        <div class="dialog-btn">
          <i :style="friend"></i>
          <!-- <div class="act"></div> -->
        </div>
      </div>
      <div class="dialog-container5" v-if="step === 5">
        <div class="dialog-alert" :style="pao4"></div>
        <div class="dialog-btn">
          <div class="shop-name" :style="coinBg">
            <p><span class="name">{{userName}}</span><span>的香氛店</span></p>
          </div>
        </div>
      </div>
      <div class="dialog-container6" v-if="step === 6">
        <div class="dialog-alert" :style="alert15">
          <div class="dialog-alert-btn"></div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { sourceDomain } from '@/utils/constant'

export default {
  components: {
  },
  props: {
    show: {
      type: Boolean,
      default: false
    },
    userName: String
  },
  data () {
    return {
      icons: {
        menu4: `${require('static/images/index/menu4.png')}`,
        menu5: `${require('static/images/index/menu5.png')}`,
        alert14: `${sourceDomain}/alert/alert14.png?v=1.3`,
        pao1: `${sourceDomain}/alert/pao1.png?v=1.3`,
        pao2: `${sourceDomain}/alert/pao2.png?v=1.3`,
        pao3: `${sourceDomain}/alert/pao3.png?v=1.3`,
        pao4: `${sourceDomain}/alert/pao4.png?v=1.3`,
        qiandao: `${require('static/images/index/qiandao.png')}`,
        friend: `${require('static/images/index/friend.png')}`,
        coinBg: `${require('static/images/index/coin-bg.png')}`,
        alert15: `${sourceDomain}/alert/alert15.png?v=1.3`,
      },
      step: 1
    }
  },
  computed: {
    menu4 () {
      return `background-image: url(${this.icons.menu4});`
    },
    menu5 () {
      return `background-image: url(${this.icons.menu5});`
    },
    alert14 () {
      return `background-image: url(${this.icons.alert14});`
    },
    pao1 () {
      return `background-image: url(${this.icons.pao1});`
    },
    pao2 () {
      return `background-image: url(${this.icons.pao2});`
    },
    pao3 () {
      return `background-image: url(${this.icons.pao3});`
    },
    pao4 () {
      return `background-image: url(${this.icons.pao4});`
    },
    qiandao () {
      return `background-image: url(${this.icons.qiandao});`
    },
    friend () {
      return `background-image: url(${this.icons.friend});`
    },
    coinBg () {
      return `background-image: url(${this.icons.coinBg});`
    },
    alert15 () {
      return `background-image: url(${this.icons.alert15});`
    },
  },
  watch: {
    show (val) {
      if (val) {
        this.$emit('onShow')
      } else {
        this.$emit('onHide')
      }
    },
  },
  methods: {
    preventD () {},
    hideDialog () {
      this.$emit('update:show', false)
    },
    onBgClick () {
      if (this.step === 6) {
        this.hideDialog()
      } else {
        this.step = this.step + 1
      }
    }
  }
}
</script>

<style lang="less" scoped>
.layer {
  z-index: 200;
  position: fixed;
  top: 0;
  width: 100%;
  height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
  background: rgba(0, 0, 0, .5);
  .dialog {
    width: 100%;
    text-align: center;
    position: relative;
    &-container1 {
      .dialog-btn {
        position: absolute;
        left: 50%;
        top: 50%;
        margin-top: 475rpx;
        margin-left: 198rpx;
        i {
          display: block;
          width: 88rpx;
          height: 88rpx;
          background-size: contain;
          background-repeat: no-repeat;
          background-position: center center;
          margin: 0 auto;
        }
        span {
          display: block;
          text-align: center;
          font-size: 17rpx;
          color: #eedfd1;
          padding-top: 4rpx;
        }
        @keyframes loading {
          from {
            transform: rotate(0deg);
          }
          to {
            transform: rotate(360deg);
          }
        }
        .act {
          display: block;
          width: 132rpx;
          height: 132rpx;
          background: url("../../static/images/index/quan1.png") no-repeat center center;
          background-size: contain;
          animation: loading 1s linear infinite;
          position: absolute;
          top: -23rpx;
          left: -21rpx;
        }
      }
      .dialog-alert {
        width: 693rpx;
        height: 402rpx;
        margin: 0 auto;
        background-size: contain;
        background-repeat: no-repeat;
        background-position: center center;
        position: relative;
        .dialog-alert-btn {
          position: absolute;
          width: 126rpx;
          height: 76rpx;
          top: 284rpx;
          left: 291rpx;
        }
      }
    }
    &-container2 {
      .dialog-btn {
        position: absolute;
        left: 50%;
        top: 50%;
        margin-top: 475rpx;
        margin-left: 78rpx;
        i {
          display: block;
          width: 88rpx;
          height: 88rpx;
          background-size: contain;
          background-repeat: no-repeat;
          background-position: center center;
          margin: 0 auto;
        }
        span {
          display: block;
          text-align: center;
          font-size: 17rpx;
          color: #eedfd1;
          padding-top: 4rpx;
        }
        @keyframes loading {
          from {
            transform: rotate(0deg);
          }
          to {
            transform: rotate(360deg);
          }
        }
        .act {
          display: block;
          width: 132rpx;
          height: 132rpx;
          background: url("../../static/images/index/quan1.png") no-repeat center center;
          background-size: contain;
          animation: loading 1s linear infinite;
          position: absolute;
          top: -23rpx;
          left: -21rpx;
        }
      }
      .dialog-alert {
        position: absolute;
        width: 409rpx;
        height: 181rpx;
        top: 50%;
        left: 68rpx;
        margin-top: 277rpx;
        background-size: contain;
        background-repeat: no-repeat;
        background-position: center center;
      }
    }
    &-container3 {
      .dialog-btn {
        position: absolute;
        top: 50%;
        left: 39rpx;
        margin-top: -452rpx;
        i {
          display: block;
          width: 88rpx;
          height: 88rpx;
          background-size: contain;
          background-repeat: no-repeat;
          background-position: center center;
          margin: 0 auto;
        }
        span {
          display: block;
          text-align: center;
          font-size: 17rpx;
          color: #eedfd1;
          padding-top: 4rpx;
        }
        @keyframes loading {
          from {
            transform: rotate(0deg);
          }
          to {
            transform: rotate(360deg);
          }
        }
        .act {
          display: block;
          width: 132rpx;
          height: 132rpx;
          background: url("../../static/images/index/quan1.png") no-repeat center center;
          background-size: contain;
          animation: loading 1s linear infinite;
          position: absolute;
          top: -21rpx;
          left: -21rpx;
        }
      }
      .dialog-alert {
        position: absolute;
        width: 422rpx;
        height: 149rpx;
        top: 50%;
        left: 140rpx;
        margin-top: -435rpx;
        background-size: contain;
        background-repeat: no-repeat;
        background-position: center center;
      }
    }
    &-container4 {
      .dialog-btn {
        position: absolute;
        top: 50%;
        left: 142rpx;
        margin-top: -452rpx;
        i {
          display: block;
          width: 88rpx;
          height: 88rpx;
          background-size: contain;
          background-repeat: no-repeat;
          background-position: center center;
          margin: 0 auto;
        }
        span {
          display: block;
          text-align: center;
          font-size: 17rpx;
          color: #eedfd1;
          padding-top: 4rpx;
        }
        @keyframes loading {
          from {
            transform: rotate(0deg);
          }
          to {
            transform: rotate(360deg);
          }
        }
        .act {
          display: block;
          width: 132rpx;
          height: 132rpx;
          background: url("../../static/images/index/quan1.png") no-repeat center center;
          background-size: contain;
          animation: loading 1s linear infinite;
          position: absolute;
          top: -21rpx;
          left: -21rpx;
        }
      }
      .dialog-alert {
        position: absolute;
        width: 422rpx;
        height: 149rpx;
        top: 50%;
        left: 240rpx;
        margin-top: -439rpx;
        background-size: contain;
        background-repeat: no-repeat;
        background-position: center center;
      }
    }
    &-container5 {
      .dialog-btn {
        position: absolute;
        top: 50%;
        left: 34rpx;
        margin-top: -563rpx;
        .shop-name {
          width: 204rpx;
          height: 63rpx;
          background-size: contain;
          background-repeat: no-repeat;
          background-position: center center;
          p {
            display: flex;
            font-size: 18rpx;
            color: #fff;
            line-height: 63rpx;
            padding-left: 24rpx;
            .name {
              max-width: 55rpx;
              overflow: hidden;
              text-overflow: ellipsis;
              display: -webkit-box;
              -webkit-box-orient: vertical;
              -webkit-line-clamp: 1;
            }
          }
        }
      }
      .dialog-alert {
        position: absolute;
        width: 422rpx;
        height: 149rpx;
        top: 50%;
        left: 245rpx;
        margin-top: -559rpx;
        background-size: contain;
        background-repeat: no-repeat;
        background-position: center center;
      }
    }
    &-container6 {
      .dialog-alert {
        width: 706rpx;
        height: 414rpx;
        margin: 0 auto;
        background-size: contain;
        background-repeat: no-repeat;
        background-position: center center;
        position: relative;
      }
    }
  }
}
</style>